<template>
  <view @touchstart="handleTouchstart" @touchend="handleTouchend">学习触屏事件</view>
</template>

<script>
/**
 * 1.给容器绑定两个触屏事件touchstart和touchend
 * 2.用户按下屏幕事件
 *  1.记录下用户按下屏幕的事件 Date.now() 时间戳 返回1970-1-1到现在的毫秒数
 *  2.记录用户按下屏幕的坐标 x和y
 * 3.用户离开屏幕事件
 *  1.记录用户离开屏幕的事件 Date.now()
 *  2.记录用户离开屏幕的坐标x和y
 *  3.根据两个事件做运算，如果按下屏幕的时长足够长
 *  4.根据两对坐标，判断距离是否合法
 *  5.当3,4都合法，则判断用户滑动的方向
 */

export default {
  data() {
    return {
      //按下的时间
      startTime: 0,
      // 按下的坐标
      startX: 0,
      startY: 0
    };
  },
  methods: {
    // 用户按下屏幕
    handleTouchstart(event) {
      // console.log("手指按下屏幕");
      // console.log("按下" + event.changedTouches[0].clientX);
      // console.log("按下" + event.changedTouches[0].clientY);
      this.startTime = Date.now();
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    handleTouchend(event) {
      // console.log("手指离开屏幕");
      // console.log("离开" + event.changedTouches[0].clientX);
      // console.log("离开" + event.changedTouches[0].clientY);
      const endTime = Date.now();
      const endX = event.changedTouches[0].clientX;
      const endY = event.changedTouches[0].clientY;

      //判断按下的时长：
      if (endTime - this.startTime > 2000) {
        return;
      }
      //滑动的方向：
      let direction = "";
      // 判断滑动的距离是否合法，再判断方向,距离要加上绝对值
      if (Math.abs(endX - this.startX) > 10) {
        // 滑动方向：
        direction = endX - this.startX > 0 ? "right" : "left";
      } else {
        return;
      }

      //用户做了合法的滑动操作
      console.log(direction);
    }
  }
};
</script>

<style>
view {
  width: 100%;
  height: 500rpx;
  background-color: aqua;
}
</style>